<template>
  <div class="con">
       <my-div class="title-wraper">
         <my-text class="title" :text="content.title"></my-text>
       </my-div>
       <!-- <my-div class="navbar">
       </my-div> -->
       <div v-html="content.content"></div>
  </div>
</template>

<script>

export default {
  name: '',
  data() {
    return {
      content:{}
    }
  },
  components: {},
  computed: {},
  watch: {},
  created() {
   this.get_content()
  },
  mounted() {
  },
  methods: {
   get_content(){
      this.$progress.show()
      const query = this.$route.query
      const { api } = query
      let params = {};
      Object.keys(query).forEach(item => {
        if(item !== 'api' && item !== 'VNK') {
          params[item] = query[item]
        }
      })
      this.$ajax.get(`/api/${api}`,{params}).then((res)=>{
         this.$progress.dismiss()
          if(res.data.code === 0){
            let con = res.data.returnObject
            con.content = `
            <div class="content">
            ${con.content}
              <style>
               .content{
                  width: 90%;
                  margin-top: 15px;
                  margin-left: 5%;
                }
                .content p {
                  font-size: 14px;
                  color: #1a1a1a;
                  line-height: 28px;
                  word-break: normal;
                  text-align: justify;
                }
                .content p span{
                  font-family: Microsoft YaHei,Helvetica Neue,Helvetica,STHeiTi,Arial,sans-serif !important;
                }
                img {
                  width:100%;
                }
              </style> 
            </div>
            `
            this.content = con
          }else{
            this.toast('请重试...')
          }
        })
    }
   }
}
</script>
<style scoped>
  html{
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
 .wrapper{
    display: flex;
    flex-direction: row;
  }
  .head{
    width: 750px;
    padding-left: 30px;
    padding-right: 30px;
    height: 100px;
    justify-content: space-between;
    align-items: center;
  }
  .title-wraper{
    width: 100%;
    padding-top: 30px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 50px;
  }
  .title{
    color: #1a1a1a;
    font-size: 48px;
    lines:2;
    line-height: 68px;
  }
  
  .content p {
    font-size: 34px;
    color: #1a1a1a;
    line-height: 60px;
    word-break: normal;
    text-align: justify;
  }
  
</style>